<template>
  <div>
    <h1>分类列表</h1>
    <div class="typeList">
      <Item title="图片">
        <!-- 在使用组件时，在标签内部书写的结构，就是传递给组件的插槽 -->
        <template #default>
          <img src="./assets/1.jpg" style="width: 100%" alt="" />
        </template>
        <template v-slot:footer>
          <a href="###">点我查看详情</a>
        </template>
      </Item>

      <Item title="音乐">
        <template #default>
          <ul>
            <li>下课约火锅</li>
            <li>在哪走一波</li>
          </ul>
        </template>
        <template v-slot:footer>
          <button>更多点击我</button>
        </template>
      </Item>

      <Item title="视频">
        <template #default>
          <video
            src="./assets/5.mp4"
            autoplay
            moted
            style="width: 100%"
          ></video>
        </template>
        <template v-slot:footer>
          <p>好看就点个赞吧</p>
        </template>
      </Item>
    </div>
  </div>
</template>

<script>
import Item from "@/components/Item";
export default {
  name: "App",
  components: {
    Item,
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.typeList {
  display: flex;
  justify-content: space-around;
}
</style>
